import Icon from '@/components/Icon';
import Input from '@/components/Input';
import NavBar from '@/components/NavBar';
import styles from './index.module.scss';
import { useEffect, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import { RootState } from '@/store';
import io from 'socket.io-client';
import { getAuth } from '@/utils/storage';

export default function Chat() {
  // 用于缓存 socket.io 客户端实例
  const clientRef = useRef<any>(null);

  useEffect(() => {
    // 创建客户端实例
    const client = io('http://toutiao.itheima.net', {
      transports: ['websocket'],
      // 在查询字符串参数中传递 token
      query: {
        token: getAuth().token,
      },
    });

    // 监听连接成功的事件
    client.on('connect', () => {
      // 向聊天记录中添加一条消息
      setMsgList(msgList => [...msgList, { type: 'robot', text: '我现在恭候着您的提问。' }]);
    });

    // 监听收到消息的事件
    client.on('message', data => {
      setMsgList(msgList => [...msgList, { type: 'robot', text: data.msg }]);
    });

    // 将客户端实例缓存到 ref 引用中
    clientRef.current = client;

    // 在组件销毁时关闭 socket.io 的连接
    return () => {
      client.close();
    };
  }, []);

  // 聊天记录
  const [msgList, setMsgList] = useState([
    // 放两条初始消息
    { type: 'robot', text: '亲爱的用户您好，小智同学为您服务。' },
    { type: 'user', text: '你好' },
  ]);

  useEffect(() => {
    window.scrollTo({
      top: document.body.scrollHeight,
      behavior: 'smooth',
    });
  }, [msgList]);

  // 当前用户信息
  const { user } = useSelector((state: RootState) => state.user);

  // 输入框中的内容
  const [message, setMessage] = useState('');

  const onSendMessage = (e: any) => {
    if (e.key === 'Enter') {
      // 通过 socket.io 客户端向服务端发送消息
      clientRef.current.emit('message', {
        msg: message,
        timestamp: Date.now(),
      });

      // 向聊天记录中添加当前发送的消息
      setMsgList(msgList => [...msgList, { type: 'user', text: message }]);

      // 发送后清空输入框
      setMessage('');
    }
  };

  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar>小智同学</NavBar>

      {/* 聊天记录列表 */}
      <div className="chat-list">
        {msgList.map((msg, index) => {
          if (msg.type === 'robot') {
            // 机器人的消息
            return (
              <div className="chat-item" key={index}>
                <Icon type="iconbtn_xiaozhitongxue" />
                <div className="message">{msg.text}</div>
              </div>
            );
          } else {
            // 用户的消息
            return (
              <div className="chat-item user" key={index}>
                <img src={user.photo || 'http://toutiao.itheima.net/images/user_head.jpg'} alt="" />
                <div className="message">{msg.text}</div>
              </div>
            );
          }
        })}
      </div>

      <div className="footer">
        {/* 底部消息输入框 */}
        <div className="input-footer">
          <Input
            className="no-border"
            placeholder="请描述您的问题"
            value={message}
            onChange={e => setMessage(e.target.value)}
            onKeyUp={onSendMessage}
          />
          <Icon type="iconbianji" />
          <span className="send">发送</span>
        </div>
      </div>
    </div>
  );
}
